<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>万物溯源</title>
  <script src="/js/jquery-3.7.1.min.js"></script>
<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  /* 容器设置 */
  .container {
    padding: 20px 5%;
    background-color: #e8f5e9; /* 浅绿色背景 */
    font-family: Arial, sans-serif;
    color: #2e7d32; /* 深绿色文本 */
  }
  /* 标题样式  */
  .title {
    font-size: 24px;
    margin-bottom: 20px;
    color: #1b5e20; /* 更深的绿色 */
    text-align: center;
    font-weight: bold;
  }
  /* 卡片样式 */
  .card {
    border-radius: 8px; /* 增加圆角 */
    border: 1px solid c8e6c9; /* 绿色边框 */
    background-color: #ffffff;/* 白色背景 */
    overflow: hidden;
    color: #2e7d32; /* 深绿色文本 */
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.2); /* 绿色阴影 */
    padding: 20px;
  }

  .card:hover {
    box-shadow: 0 6px 18px rgba(46, 125, 50, 0.3); /* 增强悬停效果 */
    transform: translateY(-3px); /* 微调卡片 */
  }

  /* 产品项 */
  .productItem {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
    border-bottom: 1px solid #c8e6c9; /* 绿色分割线 */
    padding-bottom: 10px;
  }
  /* 进程样式 */
  .process {
    margin-top: 20px;
  }
  .processItem {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* 所有步骤都居中对齐 */
    margin: 10px 0;
    width: 100%; /* 父容器占满宽度 */
  }
  /* 进程名称样式 */
  .processName {
    padding:5px 15px;
    border: 1px solid #66bb6a; /* 边框绿色 */
    background-color: #e8f5e9; /* 浅绿色背景 */
    border-radius: 20px;
    margin-top: 10px;
    font-size: 14px;
    color: #2e7d32; /* 深绿色文本 */
    font-weight: bold;
    text-align: center;
    width: 120px; /* 固定宽度，确保每一步视觉一致 */
    box-sizing: border-box; /* 确保 padding 不影响总宽度 */
  }
  /* 模态框背景 */
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    z-index: 999;
  }

  /* 遮罩层 */
  .mask {
    background-color: rgba(0, 128, 0, 0.7); /* 绿色透明遮罩 */
    width: 100%;
    height: 100%;
  }

  /* 模态框主体 */
  .modelBody {
    width: 80%;
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(46, 125, 50, 0.3); /* 绿色阴影 */
    text-align: center;
    color: #2e7d32; /* 深绿色文本 */
  }

  /* 模态框内容项 */
  .processModalItem {
    display: flex;
    align-items: center;
    margin: 20px;
    color: #2e7d32; /* 深绿色文本 */
  }
  .v {
    word-break: break-all;
    margin-left: 20px;
    color: #2e7d32; /* 深绿色文本 */
  }
</style>
</head>
<body>
  <div class="modal" >
    <div class="mask" onclick="closeModal()">
    </div>
    <div class="modelBody">
      <div class="content processModalItem">
        <div class="k">内容：</div>
        <div class="v"></div>
      </div>
      <div class="hashNo processModalItem">
        <div class="k">hash：</div>
        <div class="v"></div>
      </div>
      <div class="blockIndex processModalItem">
        <div class="k">区块号：</div>
        <div class="v"></div>
      </div>
      <div class="createTime processModalItem">
        <div class="k">创建时间：</div>
        <div class="v"></div>
      </div>
      <div class="chainStatus processModalItem">
        <div class="k">上链状态：</div>
        <div class="v"></div>
      </div>
    </div>
  </div>
  <div class="container ">
    <div class="product card">
      <div class="title">
        农产品信息
      </div>
      <div class="productName productItem">
        <div class="k">农产品名：</div>
        <div class="v"></div>
      </div>
      <div class="productDesc productItem">
        <div class="k">农产品简介：</div>
        <div class="v"></div>
      </div>
      <div class="createTime productItem">
        <div class="k">创建时间：</div>
        <div class="v"></div>
      </div>
    </div>
    <div class="card process">
      <div class="title">
        溯源流程
      </div>
      <div class="processBox">
      </div>
    </div>
  </div>
</body>

<script>
  var params = new URLSearchParams(window.location.search);
  var code = params.get('code');

  let processList = []
  function  closeModal() {
    $('.modal').hide()
  }

  function showDetail(i) {
    const item = processList[i]
    $('.modal').show()
    $('.content .v').html(item.content)
    $('.hashNo .v').html(item.hashNo)
    $('.blockIndex .v').html(item.blockIndex)
    $('.createTime .v').html(item.createTime)
    $('.chainStatus .v').html(item.chainStatus === '0'? '未上链': '上链成功' )
  }
  function  init() {
    $.ajax({
      url: '/queryCode?code='+ code, // API 的 URL 地址
      type: 'POST', // 请求类型，可以是 GET, POST, PUT, DELETE 等
      success: function(data) {
        // 在这里处理从服务器返回的数据
        const { list , product } = data.o
        processList = list
        $('.productName .v').html(product.productName)
        $('.productDesc .v').html(product.productDesc)
        $('.createTime .v').html(product.createTime)
        let html = ''
        list.forEach((item,index)=> {
          const str = `<div class="processItem">
          <div>第${index + 1}步</div>
          <div class="processName" onclick="showDetail(${index})">${item.processName}</div>
        </div>`
          html += str
        })
        $('.processBox').html(html)
      },
      error: function(jqXHR, textStatus, errorThrown) {
        // 处理请求失败的情况
        console.error('Error: ' + textStatus + ' ' + errorThrown);
      }
    });
  }

  init()
</script>
</html>